<template>
  <div class="knowledge">
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form
        ref="formRef"
        @keyup.enter="searchQuery"
        :model="queryParam"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="background-color: #f7f8fc"
      >
        <a-row :gutter="24">
          <a-col :xl="7" :lg="7" :md="8" :sm="24">
            <a-form-item name="name" label="知识库名称">
              <a-input v-model:value="queryParam.name" placeholder="请输入知识库名称" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :lg="6">
                <a-button type="primary" preIcon="ant-design:icon-opt-search" @click="searchQuery">查询</a-button>
                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
              </a-col>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-row :span="24" class="knowledge-row">
      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
        <a-card class="add-knowledge-card" @click="handleAddEditKnowled()">
          <div class="flex">
            <icon-font iconClass="icon-opt-tianjia" />
            <!-- <plus-circle-outlined /> -->
            <span class="add-knowledge-card-title">创建知识库</span>
          </div>
        </a-card>
      </a-col>
      <a-col
        v-if="knowledgeList && knowledgeList.length > 0"
        :xxl="4"
        :xl="6"
        :lg="6"
        :md="6"
        :sm="12"
        :xs="24"
        v-for="item in knowledgeList"
        :key="item.id"
      >
        <a-card class="knowledge-card pointer" @click="handleDocClick(item.id)">
          <div class="knowledge-header">
            <div class="flex">
              <img class="header-img" src="./icon/knowledge.png" />
              <div class="header-text">
                <span class="header-text-top header-name ellipsis" :title="item.name"> {{ item.name }} </span>
                <span class="header-text-top"> 创建者：{{ item.createBy }} </span>
              </div>
            </div>
          </div>
          <div class="mt-10 text-desc">
            <span>{{ item.descr || '暂无描述' }}</span>
          </div>
          <div class="knowledge-footer">
            <!-- <Icon class="knowledge-footer-icon" icon="ant-design:deployment-unit-outlined" size="14"></Icon> -->
            <span>{{ modelListData.find(model => model.value === item.embedId)?.label }}</span>
          </div>
          <div class="knowledge-btn">
            <a-dropdown placement="bottomRight" :trigger="['click']" :getPopupContainer="node => node.parentNode">
              <div class="ant-dropdown-link pointer model-icon" @click.prevent.stop>
                <p>· · ·</p>
                <!-- <Icon icon="ant-design:ellipsis-outlined" size="16"></Icon> -->
                <!-- <img src="./icon/draft.png" alt="xxxx" style="height: 16px; width: 16px;" /> -->
              </div>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="vectorization" @click.prevent.stop="handleVectorization(item.id)">
                    <!-- <Icon icon="ant-design:retweet-outlined" size="16"></Icon> -->
                    <icon-font iconClass="icon-opt-liuchengsheji" font-size="18px" title="向量化" color="#60666b"></icon-font>

                    向量化
                  </a-menu-item>
                  <a-menu-item key="text" @click.prevent.stop="handleAddEditKnowled(item)">
                    <!-- <Icon class="pointer" icon="ant-design:edit-outlined" size="16"></Icon> -->
                    <icon-font iconClass="icon-opt-bianji" font-size="18px" title="编辑" color="#60666b"></icon-font>

                    编辑
                  </a-menu-item>
                  <a-menu-item key="file" @click.prevent.stop="handleDelete(item)">
                    <!-- <Icon class="pointer" icon="ant-design:delete-outlined" size="16"></Icon> -->
                    <icon-font iconClass="icon-opt-shanchu" font-size="18px" title="删除" color="#60666b"></icon-font>

                    删除
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <Pagination
      v-if="knowledgeList.length > 0"
      :current="pageNo"
      :page-size="pageSize"
      :page-size-options="pageSizeOptions"
      :total="total"
      :showQuickJumper="true"
      :showSizeChanger="true"
      @change="handlePageChange"
      class="list-footer"
      size="small"
    />
    <!-- <button @click="showModal = true">打开模态框</button> -->

    <!--添加知识库弹窗-->
    <KnowledgeBaseModal v-model:visible="addKnowWindowButton" v-if="addKnowWindowButton" :data="current" @done="reload" />
    <!-- 知识库文档弹窗 -->
    <!-- <AiragKnowledgeDocListModal @register="docListRegister" /> -->
    <AiragKnowledgeDocListModal v-model:visible="docWindowButton" :knowledgeId="knowledgeId" v-if="docWindowButton" @done="reload" />


    <!-- <test v-model:visible="docWindowButton" @done="reload" /> -->
  </div>
</template>

<script lang="ts" setup name="KnowledgeBaseList">
import { defineComponent, ref, reactive } from 'vue';
import { Modal, message, Pagination } from 'ant-design-vue';
import { KnowledgeApi, deleteModel } from './api/KnowledgeApi';
import { useDraggable } from '@vueuse/core';
import KnowledgeBaseModal from './components/KnowledgeBaseModal.vue';
import AiragKnowledgeDocListModal from './components/AiragKnowledgeDocListModal.vue';
import { modelListData } from './AiKnowledgeBase.data';

import test from './components/test.vue';
import knowledge from '../aiflow/components/registernode/knowledge/knowledge';
// import Antd from 'ant-design-vue';

//模型列表
const knowledgeList = ref([]);
const knowledgeId = ref('');

const addKnowWindowButton = ref(false);
const docWindowButton = ref(false);

//当前页数
const pageNo = ref(1);

const pageSize = ref(10);

const current = ref(null);

//总条数
const total = ref(0);

//可选择的页数
const pageSizeOptions = ref(['10', '20', '30']);

//查询参数
const queryParam = reactive({});

//查询区域label宽度
const labelCol = ref({
  xs: 24,
  sm: 4,
  xl: 6,
  xxl: 6
});

//查询区域组件宽度
const wrapperCol = reactive({
  xs: 24,
  sm: 20
});

//查询区域表单的ref
const formRef = ref();

// const createMessage = ref<any>({});

//页面初始化执行列表查询
reload();

//新增
const handleAddEditKnowled = record => {
  current.value = record;
  addKnowWindowButton.value = true;
};

/**
 * 删除模型
 * @param item
 */
// async function handleDelete(item) {
//   await deleteModel({ id: item.id, name: item.name }, reload);
//   console.log('111111');
// }

const handleDelete = record => {
  Modal.confirm({
    title: '确认删除',
    content: `是否删除名称为${record.name}的知识库吗？`,
    okText: '确认',
    cancelText: '取消',
    onOk() {
      KnowledgeApi.delete({ id: record.id, name: record.name }).then(res => {
        if (res.success) {
          reload();
          message.success('删除成功');
        } else {
          message.error(res.message);
        }
      });
    }
  });
};

const handleVectorization = item_id => {
  // console.log(item_id);
  KnowledgeApi.rebuild(item_id).then(res => {
    // console.log('rebuildDoc', res);
    if (res) {
      message.success('向量化成功');
    } else {
      message.error(res);
    }
  }
)
};

function handleDocClick(value) {
  // console.log("文档");
  // console.log(value);
  knowledgeId.value = value;
  docWindowButton.value = true;
}

//重新加载数据
function reload() {
  let params = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    column: 'createTime',
    order: 'desc'
  };

  Object.assign(params, queryParam);

  KnowledgeApi.list(params).then(res => {
    if (res.success) {
      knowledgeList.value = res.data.records;
      total.value = Number(res.data.total);
    } else {
      knowledgeList.value = [];
      total.value = 0;
    }
  });
  // console.log(knowledgeList.value[2]);
}

function searchQuery() {
  reload();
}

function searchReset() {
  formRef.value.resetFields();
  queryParam.createBy = '';
  reload();
}

function handlePageChange(page, current) {
  pageNo.value = page;
  pageSize.value = current;
  reload();
}
</script>

<style scoped lang="less">
.knowledge {
  height: calc(100vh - 115px);
  background: #f7f8fc;
  padding: 24px;
  overflow-y: auto;

  .knowledge-row {
    max-height: calc(100% - 100px);
    margin-top: 20px;
    overflow-y: auto;
    .knowledge-header {
      position: relative;
      font-size: 14px;
      height: 40px;
      .header-img {
        width: 34px;
        height: 34px;
        margin-right: 6px;
      }
      .header-text {
        width: calc(100% - 80px);
        overflow: hidden;
        position: relative;
        display: grid;
        .header-name {
          font-size: 14px !important;
          font-weight: bold;
          color: #354052 !important;
        }
        .header-text-top {
          height: 22px;
          font-size: 12px;
        }
      }
    }
  }
}

.text-desc {
  width: 100%;
  font-weight: 400;
  display: inline-block;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 40px;
  overflow: hidden;
  font-size: 12px;
  color: #676f83;
}

.knowledge-footer {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 16px;
  .knowledge-footer-icon {
    position: relative;
    top: 2px;
  }
  span {
    margin-left: 2px;
  }
}

.flex {
  display: flex;
  align-items: center;
}

:deep(.ant-card .ant-card-body) {
  padding: 16px;
}

.mt-10 {
  margin-top: 10px;
}

.ml-4 {
  margin-left: 4px;
}

.knowledge-btn {
  position: absolute;
  right: 4px;
  top: 6px;
  height: auto;
  display: none;
}
.add-knowledge-card {
  margin-bottom: 20px;
  background: #fcfcfd;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  height: 152px;
  width: calc(100% - 20px);
  .add-knowledge-card-icon {
    padding: 8px;
    color: #1f2329;
    background-color: #f5f6f7;
    margin-right: 12px;
  }
  .add-knowledge-card-title {
    font-size: 16px;
    color: #1f2329;
    font-weight: 400;
    align-self: center;
  }
}

.add-knowledge-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.knowledge-card {
  margin-right: 20px;
  margin-bottom: 20px;
  height: 152px;
  border-radius: 10px;
  background: #fcfcfd;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.knowledge-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  .knowledge-btn {
    display: block;
  }
}
.pointer {
  cursor: pointer;
}
.list-footer {
  text-align: right;
  margin-top: 5px;
}
.jeecg-basic-table-form-container {
  padding: 0;
  :deep(.ant-form) {
    background-color: transparent;
  }
  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
}

.model-icon {
  background-color: unset;
  border: none;
  margin-right: 2px;
}
.model-icon:hover {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
}
.ant-dropdown-link {
  font-size: 14px;
  height: 24px;
  padding: 0 7px;
  border-radius: 4px;
  align-content: center;
  text-align: center;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
